<template>
  <div class="home">
    <div ref="demo1"></div>
  </div>
</template>

<script>
// 引入 wangEditor
import WangEditor from 'wangeditor'
export default {
  name: 'EditorBar',

  props: {
    content: {
      type: String,
      default: '0000000000'
    }
  },
  watch: {
    content () {
      console.log(11111)
    }
  },

  // watch: {
  //   content () {
  //     console.log(111111)
  //     // this.editor.txt.html(this.content)
  //     this.editorData = this.content
  //   }
  // },
  data () {
    return {
      editor: null,
      editorData: ''
    }
  },
  mounted () {
    const editor = new WangEditor(this.$refs.demo1)
    // 配置 onchange 回调函数，将数据同步到 vue 中
    editor.config.onchange = (newHtml) => {
      // console.log(newHtml)
      this.editorData = newHtml
      // console.log(this.editorData)
      // this.$emit('editorData', newHtml)
      this.$emit('update:content', newHtml)
    }
    editor.config.height = 200

    // 创建编辑器
    editor.create()
    this.editor = editor
  },
  methods: {
    getEditorData () {
      // 通过代码获取编辑器内容
      const data = this.editor.txt.html()
      alert(data)
    }
  },
  beforeDestroy () {
    // 调用销毁 API 对当前编辑器实例进行销毁
    this.editor.destroy()
    this.editor = null
  }
}
</script>

<style lang="scss">
.home {
  width: 1024px;
  height: 240px;
  margin: auto;
  position: relative;
  .btn {
    position: absolute;
    right: 0;
    top: 0;
    padding: 5px 10px;
    cursor: pointer;
  }
  h3 {
    margin: 30px 0 15px;
  }
}
</style>
